<script setup lang="ts">
import { theme } from 'ant-design-vue';
import { reactive } from 'vue';

import NavigationMenu from './导航菜单.vue';
import CollapseMenu from './折叠菜单.vue';

import Component2d from './components/二维地图.vue';
import Component3d from './components/三维地图.vue';
import Component2d3dSingle from './components/二三维一体化-单屏.vue';
import Component2d3dDual from './components/二三维一体化-双屏.vue';

import bostonMixin from './mixin/波士顿.js';
import mapMixin from './mixin/地图.js';
import positionMixin from './mixin/飞行.js';
import viewMixin from './mixin/视图.js';
import pointMixin from './mixin/撒点.js';
import heatMapMixin from './mixin/热力图.js';

let self = {
  ...bostonMixin,
  ...mapMixin,
  ...positionMixin,
  ...viewMixin,
  ...pointMixin,
  ...heatMapMixin
};

self.state = reactive({});
self.setState = (object = {}) => {
  const keys = Object.keys(object);
  for (let i = 0; i < keys.length; i++) {
    const key = keys[i];
    self.state[key] = object[key];
  }
  return true;
};
self.setItem = (key, value) => {
  if (window.localStorage) {
    window.localStorage.setItem(key, value);
  }
};
self.getItem = (key) => {
  if (window.localStorage) {
    return window.localStorage.getItem(key);
  } else {
    return null;
  }
};
self.setState({
  mapType: '2d3dDual',
  algorithm: self.getItem('algorithm') || 'darkAlgorithm',
  baseLayerVisible: {},
  editLayerVisible: {},
  index: 1,
  messageObject: {}
});

self.vick2dMapPostMessage = async (object) => {
  // console.log('vick2dMapPostMessage', object);
  const returnValue =
    self.vickMapRef != null &&
    self.vickMapRef.vick2dMapPostMessage != null &&
    (await self.vickMapRef.vick2dMapPostMessage(object));
  // console.log('return:', returnValue);
  return returnValue;
};

self.vick3dMapPostMessage = async (object) => {
  // console.log('vick3dMapPostMessage', object);
  const returnValue =
    self.vickMapRef != null &&
    self.vickMapRef.vick3dMapPostMessage != null &&
    (await self.vickMapRef.vick3dMapPostMessage(object));
  // console.log('return:', returnValue);
  return returnValue;
};
</script>

<template>
  <a-config-provider
    :theme="{
      algorithm: theme[self.state.algorithm],
      token: {
        fontSize: 12,
        size: 14,
        colorBgBase: self.state.algorithm == 'darkAlgorithm' ? null : '#edeae3',
        colorPrimary: '#ff7c3e'
      }
    }"
  >
    <a-layout @contextmenu.prevent="" class="main">
      <template v-if="!self.mapIsMobile()">
        <a-layout-header>
          <NavigationMenu :classSelf="self"></NavigationMenu>
        </a-layout-header>
      </template>
      <a-layout-content class="main-map">
        <div :class="[self.mapIsMobile() ? 'map-mobile' : 'map']">
          <template v-if="self.state.index == 1 && self.state.mapType == '2dOne'">
            <Component2d
              :classSelf="self"
              :setRef="
                (vickMapRef) => {
                  self.vickMapRef = vickMapRef;
                }
              "
              :earth2dConfig="{
                ...JSON.parse(JSON.stringify(self.state.earthBaseLayerConfig) || '{}')
              }"
            ></Component2d>
          </template>
          <template v-else-if="self.state.index == -1 && self.state.mapType == '2dOne'">
            <Component2d
              :classSelf="self"
              :setRef="
                (vickMapRef) => {
                  self.vickMapRef = vickMapRef;
                }
              "
              :earth2dConfig="{
                ...JSON.parse(JSON.stringify(self.state.earthBaseLayerConfig) || '{}')
              }"
            ></Component2d>
          </template>
          <template v-else-if="self.state.index == 1 && self.state.mapType == '3dOne'">
            <Component3d
              :classSelf="self"
              :setRef="
                (vickMapRef) => {
                  self.vickMapRef = vickMapRef;
                }
              "
              :earth3dConfig="{
                ...JSON.parse(JSON.stringify(self.state.earthBaseLayerConfig) || '{}')
              }"
            ></Component3d>
          </template>
          <template v-else-if="self.state.index == -1 && self.state.mapType == '3dOne'">
            <Component3d
              :classSelf="self"
              :setRef="
                (vickMapRef) => {
                  self.vickMapRef = vickMapRef;
                }
              "
              :earth3dConfig="{
                ...JSON.parse(JSON.stringify(self.state.earthBaseLayerConfig) || '{}')
              }"
            ></Component3d>
          </template>
          <template v-else-if="self.state.index == 1 && self.state.mapType == '2d3dSingle'">
            <Component2d3dSingle
              :classSelf="self"
              :setRef="
                (vickMapRef) => {
                  self.vickMapRef = vickMapRef;
                }
              "
              :earthConfig="{
                ...JSON.parse(JSON.stringify(self.state.earthBaseLayerConfig) || '{}')
              }"
            ></Component2d3dSingle>
          </template>
          <template v-else-if="self.state.index == -1 && self.state.mapType == '2d3dSingle'">
            <Component2d3dSingle
              :classSelf="self"
              :setRef="
                (vickMapRef) => {
                  self.vickMapRef = vickMapRef;
                }
              "
              :earthConfig="{
                ...JSON.parse(JSON.stringify(self.state.earthBaseLayerConfig) || '{}')
              }"
            ></Component2d3dSingle>
          </template>
          <template v-else-if="self.state.index == 1 && self.state.mapType == '2d3dDual'">
            <Component2d3dDual
              :classSelf="self"
              :setRef="
                (vickMapRef) => {
                  self.vickMapRef = vickMapRef;
                }
              "
              :earthConfig="{
                ...JSON.parse(JSON.stringify(self.state.earthBaseLayerConfig) || '{}')
              }"
            ></Component2d3dDual>
          </template>
          <template v-else-if="self.state.index == -1 && self.state.mapType == '2d3dDual'">
            <Component2d3dDual
              :classSelf="self"
              :setRef="
                (vickMapRef) => {
                  self.vickMapRef = vickMapRef;
                }
              "
              :earthConfig="{
                ...JSON.parse(JSON.stringify(self.state.earthBaseLayerConfig) || '{}')
              }"
            ></Component2d3dDual>
          </template>
        </div>
        <div :class="[self.mapIsMobile() ? 'console-mobile' : 'console']">
          <a-card class="console-value">
            <template v-for="(value, name) in self.state.messageObject">
              <div>{{ name }}:</div>
              <pre>{{ JSON.stringify(value, null, 2) }}</pre>
              <br />
            </template>
          </a-card>
        </div>
        <CollapseMenu :classSelf="self"></CollapseMenu>
      </a-layout-content>
      <template v-if="self.mapIsMobile()">
        <a-layout-footer class="layout-footer">
          <NavigationMenu :classSelf="self"></NavigationMenu>
        </a-layout-footer>
      </template>
    </a-layout>
  </a-config-provider>
</template>

<style src="./App.css"></style>
